<template>
	<view class="my-content">
		<Notification />
		<view class="u-page">
			<!--      头部导航栏-->
			<!-- <u-navbar :background="{ background: '#F4F8FA' }" :border-bottom="false" :is-back="false" height="82.85">
				<view class="navigationBar ">
					<view class="navigationBar_left">
						<view class="navigationBar_left_message">
							<text>{{ $t('消息') }}</text> -->
			<!-- plat=='app'&& -->
			<!-- -->
			<!-- <text style="font-size: 24rpx;margin-left: 30rpx;" @click="goIm()"  v-if="plat=='app'&&lang=='zh'"  v-show="is_master==1">(+ {{$t('发起会话')}})</text> -->
			<!-- </view> -->
			<!--            <view class="navigationBar_left_icon">-->
			<!--              <image :src='serverImageUrl("/static/images/message/qingchu.png")'-->
			<!--                     style="height: 24.42rpx;width: 24.42rpx;margin-right: 5rpx"></image>-->
			<!--              <text>消除未读</text>-->
			<!--            </view>-->
			<!-- </view> -->
			<!-- <view v-if="lang=='zh'" style="display: flex;justify-content: center;align-items: center" @click="goContact()"> -->
			<!--                        <image :src='serverImageUrl("/static/images/message/31haoyou.png")'-->
			<!--                               style="width: 41.86rpx;height: 36.63rpx"></image>-->
			<!-- {{$t('通讯录')}} -->
			<!-- </view> -->
			<!-- </view>
			</u-navbar> -->


			<view class="body" style="margin-top:120rpx">

				<view v-if="plat=='app'"
					style="width: 80%;margin-top: 15rpx; margin-bottom: 35rpx; margin-left: 10%;font-size: 24rpx;">
					<view v-if="record_quanxian==false">
						{{$t('请开启您手机的“麦克风”权限')}}：{{$t('当您使用聊天发送语音消息或音频聊天时,以便您能够发送语音到我们的应用中')}}</view>

					<button @click="kaiqi()" :custom-style="customStyle" hover-class="none"
						v-if="record_quanxian==false">{{$t('设置')}}</button>
					<!-- <view v-if="platform!='ios'">{{$t('安卓系列手机')}}：</view>
					   <view v-if="platform!='ios'"> "{{$t('设置')}}"-“{{$t('通知与状态')}}”-“GLUZ”App-“{{$t('通知管理')}}”-“{{$t('麦克风')}}”、“{{$t('媒体和权限')}}”、“{{$t('电话开启')}}”；</view>
					   <view v-if="platform!='ios'"> “{{$t('设置')}}”-“{{$t('应用')}}”-“{{$t('权限管理')}}”-“{{$t('麦克风')}}”-“{{$t('GLUZ App 开启')}}”；</view>
					<view v-if="platform=='ios'">{{$t('苹果系列手机')}}：</view>
					    <view v-if="platform=='ios'">“{{$t('设置')}}”-“{{$t('隐私与安全性')}}”-“{{$t('GLUZ App 开启')}}”；</view> -->
				</view>

				<!-- #ifdef APP-PLUS -->
				<TUIContact v-if="isShow==1&&logOff==true"></TUIContact>
				<!-- #endif -->


				<!-- #ifndef APP-PLUS -->
				<u-cell-group :border="false">
					<u-cell-item :arrow="false" @click="goIm">
						<template v-slot:icon>
							<image :src='serverImageUrl("/static/images/message/chatlist.png")'
								style="width: 71.76rpx;height: 71.76rpx;margin: 21.7rpx 10rpx 21.7rpx 0"></image>
						</template>
						<template v-slot:title>
							<view class="left_title">
								<text class="text1">{{ $t('消息列表') }}</text>
							</view>
						</template>
						<view class="right_title" v-if="c2cMessageCount > 0">
							<!--<text class="text1">{{ $t('未读消息数') }}</text>-->
							<view class="text2">{{ c2cMessageCount }}</view>
							<!-- 							<view style="margin-left: 8rpx;width: 140rpx;">{{ $t('条未读') }}</view -->
						</view>
					</u-cell-item>

					<!-- 系统通知 -->
					<u-cell-item :arrow="false" @click="notify('system')">
						<template v-slot:icon>
							<image :src='serverImageUrl("/static/images/message/gongsigonggao.png")'
								style="width: 71.76rpx;height: 71.76rpx;margin: 21.7rpx 10rpx 21.7rpx 0"></image>
						</template>
						<template v-slot:title>
							<view class="left_title">
								<text class="text1">{{ $t('系统通知') }}</text>
								<text class="text2" v-if="$i18n.locale == 'zh'">系统状态功能变更通知</text>
							</view>
						</template>
						<template v-slot:right-icon>
						</template>
						<view class="right_title" v-if="systemMessageCount > 0 ">
							<!-- <text class="text1">2023-06-10 14:55</text> -->
							<view class="text2">{{ systemMessageCount }}</view>
						</view>
					</u-cell-item>
					<!-- 交易通知-->
					<u-cell-item :arrow="false" @click="notify('transaction')">
						<template v-slot:icon>
							<image :src='serverImageUrl("/static/images/message/gongzuorenwu1.png")'
								style="width: 71.76rpx;height: 71.76rpx;margin: 21.7rpx 10rpx 21.7rpx 0"></image>
						</template>
						<template v-slot:title>
							<view class="left_title">
								<text class="text1">{{ $t('交易通知') }}</text>
								<text class="text2" v-if="$i18n.locale == 'zh'">交易订单状态功能变更通知</text>
							</view>
						</template>
						<template v-slot:right-icon>
						</template>
						<view class="right_title" v-if="otherMessageCount > 0">
							<!-- <text class="text1">2023-06-10 14:55</text> -->
							<view class="text3">{{ otherMessageCount>99?'99+':otherMessageCount }}</view>
						</view>
					</u-cell-item>
				</u-cell-group>
				<!-- #endif -->

				<!-- #ifdef APP-PLUS -->

				<view style="width: 100%;display: flex; margin-top: 20rpx;">
					<view class="gonggao" @click="notify('system')">
						<image :src='serverImageUrl("/static/images/message/gongsigonggao.png")'
							style="width: 30rpx;height: 30rpx;float: left;"></image>

						<view :class="lang!='ru'?'font28':'font20'" style="text-align: right;">{{ $t('系统通知') }}</view>

						<view class="right_title" v-if="systemMessageCount > 0 "
							style="position: absolute;left: 85%;top: -60%;">
							<!-- <text class="text1">2023-06-10 14:55</text> -->
							<view class="text2">{{ systemMessageCount }}</view>
						</view>

					</view>

					<view class="gonggao" @click="notify('transaction')">
						<image :src='serverImageUrl("/static/images/message/gongzuorenwu1.png")'
							style="width: 30rpx;height: 30rpx;float: left;"></image>
						<view :class="lang!='ru'?'font28':'font20'" style="text-align: right;">{{ $t('交易通知') }}</view>
						<view class="right_title" v-if="otherMessageCount > 0"
							style="position: absolute;left: 85%;top: -60%;">
							<!-- <text class="text1">2023-06-10 14:55</text> -->
							<view class="text3">{{ otherMessageCount>99?'99+':otherMessageCount }}</view>
						</view>
					</view>
				</view>

				<TUIConversation v-if="isShow==1" :isShow="is_master"></TUIConversation>
				<!-- #endif -->

			</view>
		</view>
		<vipPopup v-if="vipShow" :show="vipShow" @change="clickVipPopup" />



		<!-- <tabbar /> -->
		<view style="height: 150px;"></view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		HTTP_IMG_UTL
	} from '@/config/app';
	import tabbar from "@/components/tabbar/index.vue";
	import vipPopup from "@/components/vipPopup/index.vue";

	// import {
	// 	goImTUIConversation
	// } from "@/common/public";
	// import app from "@/main";
	// #ifdef APP-PLUS
	import TUIConversation from 'TUIKit/components/TUIConversation';
	import TUIContact from 'TUIKit/components/TUIContact';
	import {
		setPermissions
	} from '@/common/setPermissions.js';
	// #endif
	import permision from "@/js_sdk/wa-permission/permission.js"
	export default {
		components: {
			tabbar,
			vipPopup,
			// #ifdef APP-PLUS
			TUIConversation,
			TUIContact,
			permision
			// #endif
		},
		data() {
			return {
				auth: '',
				lang: this.$i18n.locale,
				customStyle: {
					background: 'linear-gradient(110deg, #cccccc 0%, #cccccc 100%)',
					'border-radius': '15rpx',
					'width': '480rpx',
					'height': '70rpx'
				},
				is_master: 0, //是否有发起会话的权限
				logOff: false,
				vipShow: false,
				//后台开关验证 vip权限
				vip: false,
				message: {},
				otherMsgCount: 0,
				sysMsgCount: 0,
				imMsgCount: 0,
				isShow: 0,
				listLang: [],
				plat: '',
				platform: '',
				record_quanxian: false,
			}
		},
		computed: {
			// ...mapGetters([
			// 	'imMsgCount',
			// 	"sysMsgCount",
			// 	"otherMsgCount",imMsgCount
			// 	// ...
			// ])

			otherMessageCount() {
				return this.$store.state.otherMessageCount
			},
			systemMessageCount() {
				return this.$store.state.systemMessageCount
			},
			c2cMessageCount() {
				return this.$store.state.c2cMessageCount
			},

		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			const platform = systemInfo.platform;
			this.platform = platform
			uni.getSystemInfo({
				success: res => {
					if (res.uniPlatform === 'app') {
						this.plat = 'app'
					} else if (res.uniPlatform === 'web') {
						this.plat = 'web'
					} else if (res.uniPlatform === 'mp-weixin') {
						this.plat = 'mp-weixin'
					}
					uni.setStorage({
						key: 'plat',
						data: this.plat
					})
				}
			})

			// #ifdef APP-PLUS
			if (this.platform == 'ios') {
				this.requestIosPermission2('record')

			} else {
				// vue的method里编写如下代码
				this.requestAndroidPermission('record')
			}
			// #endif

		},
		onShow() {
			this.$store.commit("getC2cUnreadMsgNum")
			this.msgCount = uni.getStorageSync('msgCount')
			this.isShow = 0
			if (uni.getStorageSync('userInfoFull')) {
				this.is_master = uni.getStorageSync('userInfoFull').user.is_master
			}

			this.$u.api.user.appCheck().then(res => {
				this.report = res.report
				this.vip = res.vip
				this.isShow = 1
				this.logOff = res.logOff
			})
			this.setTabbarName();
		},
		methods: {
			setTabbarName() {
				if (uni.getStorageSync("lang") != 'ru') {
					uni.setTabBarItem({
						index: 0, // tabIndex，tabbar的哪一项，从0开始
						text: '首页', // 新的名称
					});
					uni.setTabBarItem({
						index: 1, // tabIndex，tabbar的哪一项，从0开始
						text: '工作台', // 新的名称
					});
					uni.setTabBarItem({
						index: 2, // tabIndex，tabbar的哪一项，从0开始
						text: '发布', // 新的名称
					});
					uni.setTabBarItem({
						index: 3, // tabIndex，tabbar的哪一项，从0开始
						text: '消息', // 新的名称
					});
					uni.setTabBarItem({
						index: 4, // tabIndex，tabbar的哪一项，从0开始
						text: '我的', // 新的名称
					});
				} else {
					uni.setTabBarItem({
						index: 0, // tabIndex，tabbar的哪一项，从0开始
						text: 'Главная', // 新的名称
					});
					uni.setTabBarItem({
						index: 1, // tabIndex，tabbar的哪一项，从0开始
						text: 'Кабинет', // 新的名称
					});
					uni.setTabBarItem({
						index: 2, // tabIndex，tabbar的哪一项，从0开始
						text: 'Опубликовать', // 新的名称
					});
					uni.setTabBarItem({
						index: 3, // tabIndex，tabbar的哪一项，从0开始
						text: 'Сообщения', // 新的名称
					});
					uni.setTabBarItem({
						index: 4, // tabIndex，tabbar的哪一项，从0开始
						text: 'Мой', // 新的名称
					});
				}
			},
			kaiqi() {
				var that = this
				if (this.platform != 'ios') {
					uni.showModal({
						title: that.$t("该功能将获取以下权限"),
						content: that.$t("麦克风权限：当您使用聊天发送语音消息或音频聊天时,以便您能够发送语音到我们的应用中"),
						confirmText: that.$t("同意"),
						cancelText: that.$t("算了"),
						success(e) {
							if (e.confirm) {


								var main = plus.android.runtimeMainActivity(); // 获取主Activity
								var Intent = plus.android.importClass('android.content.Intent');
								var Settings = plus.android.importClass('android.provider.Settings');
								var intent = new Intent(Settings.ACTION_SETTINGS);
								main.startActivity(intent);
							}
						}
					})

				} else {
					uni.showModal({
						title: that.$t("该功能将获取以下权限"),
						content: that.$t("麦克风权限：当您使用聊天发送语音消息或音频聊天时,以便您能够发送语音到我们的应用中"),
						confirmText: that.$t("同意"),
						cancelText: that.$t("算了"),
						success(e) {
							if (e.confirm) {
								var avaudiosession = plus.ios.import("AVAudioSession");
								var avaudio = avaudiosession.sharedInstance();
								console.log(avaudio)
								avaudio.requestRecordPermission(() => {
									console.log('回调完成');
								});


								var app = plus.ios.invoke('UIApplication', 'sharedApplication');
								var setting = plus.ios.invoke('NSURL', 'URLWithString:', 'app-settings:');
								plus.ios.invoke(app, 'openURL:', setting);
								plus.ios.deleteObject(setting);
								plus.ios.deleteObject(app);

							}
						}
					})
				}
			},
			async requestAndroidPermission(id) {
				var that = this
				var result = await permision.requestAndroidPermission(id)
				var strStatus
				if (result == 1) {
					strStatus = "已获得授权"
					that.record_quanxian = true
				} else if (result == 0) {
					strStatus = "未获得授权"
					// uni.showModal({
					// 	title: that.$t("该功能将获取以下权限"),
					// 	content: that.$t("麦克风权限：当您使用聊天发送语音消息或音频聊天时,以便您能够发送语音到我们的应用中"),			
					// 	confirmText: that.$t("同意"),
					// 	cancelText: that.$t("算了"),
					// 	success(e) {
					// 		if (e.confirm) {
					// 			var main = plus.android.runtimeMainActivity(); // 获取主Activity
					// 			var Intent = plus.android.importClass('android.content.Intent');
					// 			var Settings = plus.android.importClass('android.provider.Settings');
					// 			var intent = new Intent(Settings.ACTION_SETTINGS);
					// 			main.startActivity(intent);
					// 		}
					// 	}
					// })	
				} else {
					that.record_quanxian = true
					strStatus = "被永久拒绝权限"
				}

			},

			async requestIosPermission2(id) {
				var that = this
				var result = await permision.judgeIosPermission(id)
				if (result == false) {
					// uni.showModal({
					// 	title: that.$t("该功能将获取以下权限"),
					// 	content: that.$t("麦克风权限：当您使用聊天发送语音消息或音频聊天时,以便您能够发送语音到我们的应用中"),			
					// 	confirmText: that.$t("同意"),
					// 	cancelText: that.$t("算了"),
					// 	success(e) {
					// 		if (e.confirm) {
					// 			var app = plus.ios.invoke('UIApplication', 'sharedApplication');
					// 			var setting = plus.ios.invoke('NSURL', 'URLWithString:', 'app-settings:');
					// 			plus.ios.invoke(app, 'openURL:', setting);
					// 			plus.ios.deleteObject(setting);
					// 			plus.ios.deleteObject(app);
					// 		}
					// 	}
					// })	
				} else {
					that.record_quanxian = true
				}

			},
			goIm() {
				var that = this;
				uni.navigateTo({
					url: "/TUIKit/components/TUIConversation/list",
				})
				return;
			},
			goContact() {
				var that = this;
				uni.navigateTo({
					url: "/TUIKit/components/TUIContact/index",
				})
				return;
			},
			getUserAuth() {
				const that = this
				if (that.$isLogin()) { // 已登录
					that.$u.api.user.getUserAuth().then(res => {
						that.auth = res
					})
				}
			},
			notify(type) {
				const typeObj = {
					transaction: "transactionNotice",
					system: "systemNotification",
					individual: "individual"
				}
				//类型（系统通知，交易通知，个人通知）
				this.$u.route({
					url: `/pages/message/${typeObj[type]}/${typeObj[type]}`
				})
			},
			clickVipPopup() {
				this.vipShow = false
			},

		}
	}
</script>

<style lang="scss" scoped>
	.navigationBar {
		width: 100%;
		padding: 41.86rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.navigationBar_left {
			display: flex;
			flex-direction: row;
			align-items: center;

			.navigationBar_left_message {
				margin-right: 20rpx;
				font-size: 35rpx;
				font-weight: 600;
				color: #202020;
				line-height: 49rpx;

				.navigationBar_left_icon {
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						font-size: $my-font-size24;
						font-weight: 400;
						color: #8F8F8F;
						line-height: 35rpx;
					}
				}
			}
		}
	}

	.body {
		height: auto;
		background-color: #FFFFFF;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
	}

	.left_title {
		display: flex;
		flex-direction: column;
		margin-left: 17.44rpx;

		.text1 {
			font-size: 29rpx;
			font-weight: 500;
			color: #0F0F0F;
			line-height: 35rpx;
			max-width: 300rpx;
		}

		.text2 {
			font-size: 24rpx;
			// max-width: 240rpx;
			font-weight: 400;
			color: #464646;
			line-height: 35rpx;
			margin-top: 10rpx;
		}
	}

	.right_title {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: flex-end;
		flex-direction: column;

		.text1 {
			font-size: 29rpx;
			font-weight: 300;
			color: #454545;
			line-height: 30rpx;
			margin-bottom: 10rpx;
		}

		.text2 {
			height: 60.12rpx;
			width: 60.12rpx;
			background-color: #ED793C;
			color: #FFFFFF;
			border-radius: 30.06rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 10rpx;
		}
	}

	.text3 {
		height: 60.12rpx;
		min-width: 60.12rpx;
		padding: 0 10rpx;
		background-color: #ED793C;
		color: #FFFFFF;
		border-radius: 30.06rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
	}

	.gonggao {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 40px;
		padding: 0 10px;
		border: 0.5px solid #999;
		flex: 1;
		margin: 0 15px;
		border-radius: 5px;
		position: relative;
	}

	.font28 {
		font-size: 28rpx;
	}

	.font20 {
		font-size: 20rpx;
	}
</style>